<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-lg p-6">
    <fieldset class="space-y-3">
      <legend class="sr-only">Delivery</legend>

      <div>
        <label
          for="DeliveryStandard"
          class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
        >
          <p class="text-gray-700 dark:text-gray-200">Standard</p>

          <p class="text-gray-900 dark:text-white">Free</p>

          <input
            type="radio"
            name="DeliveryOption"
            value="DeliveryStandard"
            id="DeliveryStandard"
            class="sr-only"
            checked
          />
        </label>
      </div>

      <div>
        <label
          for="DeliveryPriority"
          class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
        >
          <p class="text-gray-700 dark:text-gray-200">Next Day</p>

          <p class="text-gray-900 dark:text-white">£9.99</p>

          <input
            type="radio"
            name="DeliveryOption"
            value="DeliveryPriority"
            id="DeliveryPriority"
            class="sr-only"
          />
        </label>
      </div>
    </fieldset>
  </body>
</html>
